<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/serverUrl.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				text-align: center;
			}

			.main {
				margin-top: 30%;
			}
		</style>
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册账号</h1>
		</header>
		<div class=" mui-card main">
			<br />
			<div class="mui-input-group">
				<div class="mui-input-row">
					<label>账号</label>
					<input type="text" id="account" class="mui-input-clear" placeholder="请输入账号">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input type="password" id="password" class="mui-input-password" placeholder="请输入密码">
				</div>
				<div class="mui-input-row">
					<label>姓名</label>
					<input type="text" id="name" class="mui-input-clear" placeholder="请输入姓名">
				</div>
				<div class="mui-input-row">
					<label>电话</label>
					<input type="text" id="telephone" class="mui-input-clear" placeholder="请输入电话">
				</div>
				<div class="mui-input-row">
					<label>班级</label>
					<select id="class" style="color:#707070;">

					</select>
				</div>
				<br />
				<div class="mui-button-row">
					<button type="list" id="register" class="mui-btn mui-btn-danger">&nbsp;&nbsp;&nbsp;&nbsp;注册&nbsp;&nbsp;&nbsp;&nbsp;</button>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		//获取班级列表
		$.ajax({
			//请求方式
			type: 'POST',
			dataType: 'json',
			url: serverUrl + "getClassName",
			headers: {
				'Content-Type': 'application/json;charset=utf-8'
			},
			//请求成功
			success: function(data) {
				var strClassNames = "<option value='' >请选择班级</option>";
				for (var i in data) {
					strClassNames = strClassNames + "<option value='" + data[i] + "' >" + data[i] + "</option>";
				}
				document.getElementById("class").innerHTML = strClassNames;
			},
			//请求失败，包含具体的错误信息
			error: function(e) {
				mui.toast("遇到了未知错误！");
			}
		});
		

		// 注册按钮点击事件
		document.getElementById("register").addEventListener("tap", function() {
			var RegisterJSON = {};
			RegisterJSON.account = document.getElementById("account").value;
			RegisterJSON.className = document.getElementById("class").value;
			RegisterJSON.name = document.getElementById("name").value;
			RegisterJSON.password = document.getElementById("password").value;
			RegisterJSON.teleNumber = document.getElementById("telephone").value;
			RegisterJSON.userID=0;

			$.ajax({
				//请求方式
				type: 'POST',
				dataType: 'json',
				url: serverUrl + "registerStudent",
				headers: {
					'Content-Type': 'application/json;charset=utf-8'
				},
				data: JSON.stringify(RegisterJSON),
				//请求成功
				success: function(data) {
					if (data == "success") {
						mui.toast('注册成功！',{ duration:'long' });
						mui.back();
					} else{
						mui.toast(data);
					}
				},
				//请求失败，包含具体的错误信息
				error: function(e) {
					mui.toast("遇到了未知错误！");
				}
			});
		});
	</script>
</html>
